<div class="card">
  <h4 class="card-header collapsed" data-toggle="collapse" data-target="#collapse-shipping">{{ heading_title }}</h4>
  <div id="collapse-shipping" class="collapse" data-parent="#accordion">
    <div class="card-body">
      <div class="form-group row required">
        <label class="col-sm-3 col-form-label" for="input-country">{{ entry_country }}</label>
        <div class="col-md-9">
          <select name="country_id" id="input-country" class="form-control">
            <option value="">{{ text_select }}</option>
            {% for country in countries %}
              {% if country.country_id == country_id %}
                <option value="{{ country.country_id }}" selected="selected">{{ country.name }}</option>
              {% else %}
                <option value="{{ country.country_id }}">{{ country.name }}</option>
              {% endif %}
            {% endfor %}
          </select>
        </div>
      </div>
      <div class="form-group row required">
        <label class="col-sm-3 col-form-label" for="input-zone">{{ entry_zone }}</label>
        <div class="col-md-9">
          <select name="zone_id" id="input-zone" class="form-control"> </select>
        </div>
      </div>
      <div class="form-group row required">
        <label class="col-md-3 col-form-label" for="input-postcode">{{ entry_postcode }}</label>
        <div class="col-md-9">
          <input type="text" name="postcode" value="{{ postcode }}" placeholder="{{ entry_postcode }}" id="input-postcode" class="form-control"/>
        </div>
      </div>
      <div class="d-inline-block pt-2 pd-2 w-100">
        <div class="float-right">
          <button type="button" id="button-quote" data-loading-text="{{ text_loading }}" class="btn btn-primary">{{ button_quote }}</button>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript"><!--
  $('#button-quote').on('click', function() {
	  $.ajax({
		  url: 'index.php?route=extension/total/shipping/quote',
		  type: 'post',
		  data: 'country_id=' + $('select[name=\'country_id\']').val() + '&zone_id=' + $('select[name=\'zone_id\']').val() + '&postcode=' + encodeURIComponent($('input[name=\'postcode\']').val()),
		  dataType: 'json',
		  beforeSend: function() {
			  $('#button-quote').button('loading');
		  },
		  complete: function() {
			  $('#button-quote').button('reset');
		  },
		  success: function(json) {
			  $('.alert-dismissible, .text-danger').remove();

			  if (json['error']) {
				  if (json['error']['warning']) {
					  $('#collapse-shipping .card-body').prepend('<div class="alert alert-danger alert-dismissible"><i class="fas fa-exclamation-circle"></i> ' + json['error']['warning'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>');
				  }

				  if (json['error']['country']) {
					  $('select[name=\'country_id\']').after('<div class="text-danger">' + json['error']['country'] + '</div>');
				  }

				  if (json['error']['zone']) {
					  $('select[name=\'zone_id\']').after('<div class="text-danger">' + json['error']['zone'] + '</div>');
				  }

				  if (json['error']['postcode']) {
					  $('input[name=\'postcode\']').after('<div class="text-danger">' + json['error']['postcode'] + '</div>');
				  }
			  }

			  if (json['shipping_method']) {
				  $('#modal-shipping').remove();

				  html = '<div id="modal-shipping" class="modal">';
				  html += '  <div class="modal-dialog">';
				  html += '    <div class="modal-content">';
				  html += '      <div class="modal-header">';
				  html += '        <h4 class="modal-title">{{ text_shipping_method }}</h4>';
				  html += '      </div>';
				  html += '      <div class="modal-body">';

				  for (i in json['shipping_method']) {
					  html += '<p><strong>' + json['shipping_method'][i]['title'] + '</strong></p>';

					  if (!json['shipping_method'][i]['error']) {
						  for (j in json['shipping_method'][i]['quote']) {
							  html += '<div class="form-check">';
							  html += '  <label>';

							  if (json['shipping_method'][i]['quote'][j]['code'] == '{{ shipping_method }}') {
								  html += '<input type="radio" name="shipping_method" value="' + json['shipping_method'][i]['quote'][j]['code'] + '" checked="checked" /> ';
							  } else {
								  html += '<input type="radio" name="shipping_method" value="' + json['shipping_method'][i]['quote'][j]['code'] + '" /> ';
							  }

							  html += json['shipping_method'][i]['quote'][j]['title'] + ' - ' + json['shipping_method'][i]['quote'][j]['text'] + '</label></div>';
						  }
					  } else {
						  html += '<div class="alert alert-danger alert-dismissible">' + json['shipping_method'][i]['error'] + '</div>';
					  }
				  }

				  html += '      </div>';
				  html += '      <div class="modal-footer">';
				  html += '        <button type="button" class="btn btn-light" data-dismiss="modal">{{ button_cancel }}</button>';

                {% if shipping_method %}
				  html += '        <button type="button" id="button-shipping" data-loading-text="{{ text_loading }}" class="btn btn-primary">{{ button_shipping }}</button>';
                {% else %}
				  html += '        <button type="button" id="button-shipping" data-loading-text="{{ text_loading }}" disabled="disabled" class="btn btn-primary">{{ button_shipping }}</button>';
                {% endif %}

				  html += '      </div>';
				  html += '    </div>';
				  html += '  </div>';
				  html += '</div> ';

				  $('body').append(html);

				  $('#modal-shipping').modal('show');

				  $('input[name=\'shipping_method\']').on('change', function() {
					  $('#button-shipping').prop('disabled', false);
				  });
			  }
		  },
		  error: function(xhr, ajaxOptions, thrownError) {
			  alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
		  }
	  });
  });

  $(document).delegate('#button-shipping', 'click', function() {
	  $.ajax({
		  url: 'index.php?route=extension/total/shipping/shipping',
		  type: 'post',
		  data: 'shipping_method=' + encodeURIComponent($('input[name=\'shipping_method\']:checked').val()),
		  dataType: 'json',
		  beforeSend: function() {
			  $('#button-shipping').button('loading');
		  },
		  complete: function() {
			  $('#button-shipping').button('reset');
		  },
		  success: function(json) {
			  $('.alert-dismissible').remove();

			  if (json['error']) {
				  $('.breadcrumb').after('<div class="alert alert-danger alert-dismissible"><i class="fas fa-exclamation-circle"></i> ' + json['error'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>');

				  $('html, body').animate({scrollTop: 0}, 'slow');
			  }

			  if (json['redirect']) {
				  location = json['redirect'];
			  }
		  },
		  error: function(xhr, ajaxOptions, thrownError) {
			  alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
		  }
	  });
  });
  //--></script>
  <script type="text/javascript"><!--
  $('select[name=\'country_id\']').on('change', function() {
	  $.ajax({
		  url: 'index.php?route=extension/total/shipping/country&country_id=' + this.value,
		  dataType: 'json',
		  beforeSend: function() {
			  $('select[name=\'country_id\']').prop('disabled', true);
		  },
		  complete: function() {
			  $('select[name=\'country_id\']').prop('disabled', false);
		  },
		  success: function(json) {
			  if (json['postcode_required'] == '1') {
				  $('input[name=\'postcode\']').parent().parent().addClass('required');
			  } else {
				  $('input[name=\'postcode\']').parent().parent().removeClass('required');
			  }

			  html = '<option value="">{{ text_select }}</option>';

			  if (json['zone'] && json['zone'] != '') {
				  for (i = 0; i < json['zone'].length; i++) {
					  html += '<option value="' + json['zone'][i]['zone_id'] + '"';

					  if (json['zone'][i]['zone_id'] == '{{ zone_id }}') {
						  html += ' selected="selected"';
					  }

					  html += '>' + json['zone'][i]['name'] + '</option>';
				  }
			  } else {
				  html += '<option value="0" selected="selected">{{ text_none }}</option>';
			  }

			  $('select[name=\'zone_id\']').html(html);
		  },
		  error: function(xhr, ajaxOptions, thrownError) {
			  alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
		  }
	  });
  });

  $('select[name=\'country_id\']').trigger('change');
  //--></script>
</div>